const path = require('path');
const webpack =require('webpack');
// 自动生成 html 并且注入到 .html 文件中的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
	//context: path.resolve(__dirname, '../'),
	entry: {
		vendor:['vue-router','vue','vuex','jquery','moment', 'underscore'],
		index:['babel-polyfill','./src/index.js'], //入口
	},
	mode:'development',//默认是production 或webpack --mode=production
	// output: {
	//     path: path.resolve(__dirname, '../dist'),
	// 	filename:'js/[name].bundle.js',
	// 	publicPath:'',//解析目录相对于Html引用
	// },
	//devtool: "source-map",
	module: {
		rules: [
			{
				test: require.resolve("../plugins/jquery.js"),
				use:[
					{
						loader:'expose-loader',
						options: '$'
					}
				]
			},
			{
				test: require.resolve('underscore'),//全局配置
				use:[
					{
						loader:'expose-loader',
						options: '_'
					}
				]
			},
			{
                test:/\.js$/,
				use:['babel-loader'],
				// use:[
				// 	{
				// 		loader:'babel-loader',
				// 		options: {
				// 			cacheDirectory: true
				// 		}
				// 	}
				// ],
				include: [resolve('src'),resolve('ui')],
     			//exclude: /node_modules/
            },{
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
						loader:'file-loader',
						options:{
							name: "imgs/[hash].[ext]"
						}
					}
				],
				include: [resolve('src'),resolve('ui')],
     			exclude: /node_modules/
            },{
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                    {
						loader:'file-loader',
						options:{
							name: "font/[hash].[ext]"
						}
					}
				],
				include: [resolve('src'),resolve('ui')],
     			exclude: /node_modules/	
			}
		]
	},
	plugins:[
		new VueLoaderPlugin(),
		// new ExtractTextWebapckPlugin('style.[name].css'),
		// 解决vender后面的hash每次都改变
		//new webpack.HashedModuleIdsPlugin(),
        new HtmlWebpackPlugin({
            title:'ouput webpack 4 test ',
            filename:'index.html',//输出文件名
            template:path.resolve(__dirname, '../index.html')
		}),
		//HotModule 插件在页面进行变更的时候只会重绘对应的页面模块，不会重绘整个 html 文件
		new webpack.HotModuleReplacementPlugin(),//hot
		new webpack.NoEmitOnErrorsPlugin(),
   		// https://github.com/ampedandwired/html-webpack-plugin
		//new webpack.NamedModulesPlugin(),//用户名替代id
		//不需要显示引入	
		new webpack.ProvidePlugin({
			'$': 'jquery',
			"_": 'underscore',
		})
	],
	resolve:{
		extensions: [".js", ".vue"],	
		modules:[
			path.resolve(__dirname,'../src'),
			path.resolve(__dirname,'../ui'),
			path.resolve(__dirname,'../node_modules')
		],
		alias:{
			'vue': 'vue/dist/vue.esm.js',	
			'jquery':path.resolve(__dirname,"../plugins/jquery.js"),
			'@': path.resolve(__dirname,'../src'),
			'ui':path.resolve(__dirname,"../ui")
		}
	}
};

